<template>
  <!--分配角色功能-->
  <div v-loading="loading">
    <el-button type="primary" @click="submit">提交</el-button>
    <el-tree
      style="margin-top: 20px"
      :data="roleList"
      :default-checked-keys="ifRole"
      :props="{label:'roleAlias'}"
      node-key="id"
      show-checkbox
      @check-change="handleCheckChange"
    >
    </el-tree>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
  name: 'DataDetails',
  props:{
    propsData:{
      type:Object,
      required:true
    }
  },
  data(){
    return{
      loading:false,
      roleList:[],
      ifRole:[],
      submitRole:[]
    }
  },
  mounted () {
    this.getRoleList()
    this.getIfRole()
  },
  methods:{
    //选中/取消选中角色
    handleCheckChange(data, checked) {
      if (checked){
        this.submitRole.push(data.id)
      }else {
        this.submitRole.splice(this.submitRole.indexOf(data.id),1)
      }
    },
    //获得全部角色列表
    getRoleList(){
      this.$http.get('/api/role/nameOrId').then(res =>{
        this.roleList = res.data.data
      })
    },
    //获得当前接口所需角色
    getIfRole(){
      this.$http.get('/api/interfaceConfiguration/role?id='+ this.propsData.id).then(res =>{
        this.ifRole = res.data.data.map(role => parseInt(role.id))
        console.log(this.ifRole)
      })
    },
    //更新接口所需角色
    submit(){
      this.loading = true
      this.$http.post('/api/interfaceConfiguration/role',null,{params:{'id':this.propsData.id,'rid':this.submitRole.join(",")}}).then(res =>{
        this.loading = false
        ElMessage({
          type: 'success',
          message: res.data.message,
        })
        //触发事件
        this.$emit('tao')
      }).catch(() => this.loading = false)
    }
  }
}
</script>

<style scoped>

</style>
